import { memo } from 'react';
import type { ReactNode, FC } from 'react';
import Ranks from '../ranks';
import { shallowEqualApp, useAppSelector } from '@/store/hooks';
import { RankTopListWrapper } from './style';
interface IProps {
  children?: ReactNode;
}

const RankTopList: FC<IProps> = (props) => {
  const { topList } = useAppSelector(
    (state) => ({
      topList: state.rank.topList,
    }),
    shallowEqualApp
  );
  const character = topList.slice(0, 4);
  const media = topList.slice(4);
  return (
    <RankTopListWrapper>
      <Ranks name={'云音乐特色榜'} RankList={character}></Ranks>
      <Ranks name={'全球媒体榜'} RankList={media}></Ranks>
    </RankTopListWrapper>
  );
};

export default memo(RankTopList);
